<!--
 * @Date: 2023-09-08 10:58:17
 * @LastEditTime: 2023-09-22 13:47:28
 * 介绍:
-->
<script lang="ts" setup>
import type { ObjectFit, ObjectPosition } from "../../types/index";
import { showImagePreview } from "vant";
const props = defineProps<{
  imgFit?: ObjectFit;
  imgPosition?: ObjectPosition;
  images?: string[];
}>();

function previewImage(i: number) {
  showImagePreview({
    images: props.images || [],
    startPosition: i,
    teleport: "body",
  });
}
</script>
<template>
  <Cgrid class="CimagesPreview" col="3" repeat="1fr">
    <CautoSquare
      v-for="(img, i) in props.images"
      :key="i"
      class="CimagesPreview_item"
    >
      <Rimage
        @click="previewImage(i)"
        :src="img"
        height="100%"
        width="100%"
        :fit="props.imgFit || 'contain'"
        :position="props.imgPosition || 'center'"
      />
    </CautoSquare>
  </Cgrid>
</template>
<style lang="scss" scoped>
.CimagesPreview_item {
  border: solid 1rem var(--C-B3);
  border-radius: var(--R-sm);
}
</style>
